<template>
  <div class="mine_content">
    <div class="mine_box">
      <!-- 头像内容 -->
      <div class="info_box">
        <img class="tx" src="../../assets/imageW/mine.png" alt="" />

        <!-- <div class="name_text" @click="goRegister">
          <div class="text_1">未登录</div>
          <div class="text_2">点击注册/登录</div>
        </div> -->

        <div class="name_text" @click="goRegister" v-if="!$store.state.user">
          <div class="text_1">未登录</div>
          <div class="text_2">点击注册/登录</div>
        </div>
        <div class="name_text jinzhi" @click="goRegister" v-if="$store.state.user">
          <div class="text_1">用户</div>
          <div class="text_2">{{$store.state.user}}</div>
        </div>
      </div>

      <!-- 我的内容 -->
      <div class="mineBox">
        <div class="boxItem" @click="gopaient">
          <img class="boxtu" src="../../assets/imageW/ic_icon2@2x.png" alt="" />
          <div class="boxtext">我的就诊人</div>
        </div>
        <div class="boxItem" @click="goGH">
          <img class="boxtu" src="../../assets/imageW/ic_icon4@2x.png" alt="" />
          <div class="boxtext">我的挂号</div>
        </div>
        <div class="boxItem" @click="goCollect">
          <img class="boxtu" src="../../assets/imageW/ic_icon6@2x.png" alt="" />
          <div class="boxtext">我的关注</div>
        </div>
      </div>

      <!-- 我的列表 -->
      <div class="mineList">
        <div class="listItem" @click="goMessage">
          <!-- 左部图文 -->
          <div class="left_item">
            <img class="tu" src="../../assets/imageW/3.yinsi.png" alt="" />
            <div class="listText">意见反馈</div>
          </div>
          <!-- 箭头 -->
          <img class="jiet" src="../../assets/imageW/ic_y@2x.png" alt="" />
        </div>
        <div class="listItem" @click="goAbout">
          <!-- 左部图文 -->
          <div class="left_item">
            <img class="tu" src="../../assets/imageW/6.about.png" alt="" />
            <div class="listText">关于我们</div>
          </div>
          <!-- 箭头 -->
          <img class="jiet" src="../../assets/imageW/ic_y@2x.png" alt="" />
        </div>
        <div class="listItem" @click="goPrivacy">
          <!-- 左部图文 -->
          <div class="left_item">
            <img class="tu" src="../../assets/imageW/5.xieyi.png" alt="" />
            <div class="listText">隐私政策</div>
          </div>
          <!-- 箭头 -->
          <img class="jiet" src="../../assets/imageW/ic_y@2x.png" alt="" />
        </div>
        <div class="listItem" @click="gouserLetter">
          <!-- 左部图文 -->
          <div class="left_item">
            <img class="tu" src="../../assets/imageW/7.mine.png" alt="" />
            <div class="listText">用户协议</div>
          </div>
          <!-- 箭头 -->
          <img class="jiet" src="../../assets/imageW/ic_y@2x.png" alt="" />
        </div>
        <div class="listItem" @click="share">
          <!-- 左部图文 -->
          <div class="left_item">
            <img class="tu" src="../../assets/imageW/2.share.png" alt="" />
            <div class="listText">分享好友</div>
          </div>
          <!-- 箭头 -->
          <img class="jiet" src="../../assets/imageW/ic_y@2x.png" alt="" />
        </div>
        <div class="listItem" @click="soket">
          <!-- 左部图文 -->
          <div class="left_item">
            <img class="tu" src="../../assets/imageW/kefu.png" alt="" />
            <div class="listText">在线客服</div>
          </div>
          <!-- 箭头 -->
          <img class="jiet" src="../../assets/imageW/ic_y@2x.png" alt="" />
        </div>
        <div class="listItem1" @click="goInfo">
          <!-- 左部图文 -->
          <div class="left_item">
            <img class="tu" src="../../assets/imageW/1.baohu.png" alt="" />
            <div class="listText">账号设置</div>
          </div>
          <!-- 箭头 -->
          <img class="jiet" src="../../assets/imageW/ic_y@2x.png" alt="" />
        </div>
      </div>
    </div>

    <!-- 分享弹窗 -->
    <div class="mask" v-if="mask">
      <div class="maskBox">
        <div class="off">选择要分享到的平台</div>
        <div class="chooseBox">
          <div class="watchBox" @click="appShare('WXSceneSession')">
            <img class="wxTu" src="../../assets/imageW/watch.png" alt="" />
            <div class="wxText">微信</div>
          </div>
          <div class="watchBox" @click="appShare('WXSenceTimeline')">
            <img class="wxTu" src="../../assets/imageW/wxquan.png" alt="" />
            <div class="wxText">微信朋友圈</div>
          </div>
        </div>

        <div class="choose" @click="qxshare">
          取消分享
          <!-- <div class="noqx" @click="offPop">不取消</div>
                    <div class="sure" @click="succPop">确定</div> -->
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import uniPopup from "@/components/uni-popup/uni-popup-share.vue";
import app from "../../App.vue";
export default {
  data() {
    return {
      mask: false,
      phone: "",
    };
  },
  onLoad() {
    // 页面初始加载 利用token判断登录状态
    if (
      uni.getStorageSync("token") == "" ||
      uni.getStorageSync("token") == null
    ) {
    } else {
      this.name = uni.getStorageSync("nickname");
      this.image = uni.getStorageSync("avatar");
    }
  },
  components: {
    uniPopup,
  },
  methods: {
    soket(){
      if(this.$store.state.phone){
        this.$router.push(`/soket`)
      }else{
        this.$messagebox({
          title: '请先登录',
          message: '需要帮您跳转登录页面吗?',
          showCancelButton: true
        }).then(res=>{
          if(res == 'confirm'){
            this.$router.push(`/register`)
          }
        })
      }
    },
    goRegister() {
      this.$router.push("/register");
    },
    goAbout() {
      this.$router.push("/aboutMine");
    },
    goPrivacy() {
      this.$router.push("/privacy");
    },
    gouserLetter() {
      this.$router.push("/userLetter");
    },
    goMessage() {
      this.$router.push("/message");
    },
    goInfo() {
      if(!this.$store.state.phone){
        this.$router.push('/register')
      }else{
        this.$router.push("/InfoSet");
      }
    },
    gopaient() {
      this.$router.push("/patient");
    },
    goCollect() {
      this.$router.push("/collect");
    },
    goGH() {
      this.$router.push("/mineGH");
    },
    // 弹窗控制
    share() {
      this.mask = true;
      // this.maskBox = true
    },
    qxshare() {
      this.mask = false;
    },
    appShare(scene) {
      let that = this;
      let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
      let curRoute = routes[routes.length - 1].$page.fullPath; // 获取当前页面路由，也就是最后一个打开的页面路由
      uni.share({
        provider: "weixin", //分享服务提供商（即weixin|qq|sinaweibo）
        scene: scene, //场景，可取值参考下面说明。
        type: 0, //分享形式
        href: `${HTTP_IP_URL}${curRoute}&spread=${that.uid}`, //跳转链接
        title: that.storeInfo.storeName, //分享内容的标题
        summary: that.storeInfo.storeInfo, //分享内容的摘要
        imageUrl: that.storeInfo.image, //图片地址
        success: function (res) {
          that.posters = false; //成功后关闭底部弹框
          this.mask = false;
        },
        fail: function (err) {
          uni.showToast({
            title: "分享失败",
            icon: "none",
            duration: 2000,
          });
          that.posters = false;
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
// body{
//   background-image: url(../../assets/imageW/img_my-bg.png);
//   background-size:100% 100%;
// //   background-image: url(../../assets/imageW/ic_bj.png);
// //  background-size:100% 100%;
// }
.mine_content {
  &::after {
    content: "";
    display: block;
    height: 49px;
  }
  height: 100%;
  width: 100%;
  padding-bottom: 10px;
  background-image: url(../../assets/imageW/img_my-bg.png);
  background-size: 100% 100%;
}
.mine_box {
  padding: 1vh 3vh;
}
.tx {
  width: 48px;
  height: 48px;
  border: 2px solid #bfc5c6;
  border-radius: 28px;
  overflow: hidden;
  margin-right: 12px;
}
.info_box {
  margin-top: 28px;
  display: flex;
  align-items: center;
}
.text_1 {
  color: #bac1c5;
}
.text_2 {
  margin-top: 4px;
  font-size: 18px;
  font-weight: 600;
}
.mineBox {
  background-color: white;
  border-radius: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px;
  box-sizing: border-box;
  margin: 28px 0;
}
.boxItem {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.mineList {
  background-color: white;
  border-radius: 20px;
  padding: 0 10px;
  box-sizing: border-box;
}
.listItem {
  opacity: 1;
  color: rgba(0, 0, 0, 0.9);
  font-size: 24rpx;
  display: flex;
  padding: 10px 0;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #d3d7d7;
}
.listItem1 {
  opacity: 1;
  color: rgba(0, 0, 0, 0.9);
  font-size: 24rpx;
  display: flex;
  padding: 10px 0;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
}
.left_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.jiet {
  width: 24px;
  height: 24px;
}
.tu {
  width: 26px;
  height: 26px;
  margin-right: 12px;
}
.listText {
  font-size: 14px;
  font-weight: 500;
  color: black;
}
.boxtu {
  width: 48px;
  height: 48px;
}
.boxtext {
  font-size: 12px;
}
// 弹窗
.mask {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
}

.maskBox {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 999999;
  height: 280px;
  border-radius: 10px;
  opacity: 1;
  border: none;
  background: rgba(255, 255, 255, 1);
  padding: 15px;
  box-sizing: border-box;
}
.off {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 2px;
  text-align: center;
}
.chooseBox {
  width: 100%;
  display: flex;
  // justify-content: center;
  justify-content: space-between;
  align-content: center;
  padding: 15px 5px 10px;
  box-sizing: border-box;
}
.watchBox {
  width: 100px;
  padding: 0 10px;
  box-sizing: border-box;
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-content: center;
}
.wxTu {
  width: 42px;
  height: 42px;
  margin: 0 auto;
}
.wxTu image {
  width: 100%;
}
.wxText {
  font-size: 16px;
  text-align: center;
}
.choose {
  padding: 15px 10px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-content: center;
  border: none;
  border-radius: 28px;
  background-color: #41f2af;
  color: white;
  font-size: 20px;
  font-weight: 600;
  margin-top: 30px;
}
.jinzhi{
  pointer-events: none;
}
</style>

